<template>
  <div class="problem-list-view">

    <modules-title class="title-position" titleName="项目问题">

      <template slot="btn">
        <el-button
          v-hasPermi="{v:['xiangmu:problem:add']}"
          type="primary" size="mini" @click="addClick">创建问题</el-button>
      </template>

    </modules-title>

    <div class="pj-content">

      <div class="screen-view">

        <el-form
          ref="queryForm"
          :model="screenData"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="问题状态">
            <el-select
              v-model="screenData.status"
              placeholder="请选择状态"
              size="small"
              clearable
              @change="statusChange"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="问题类型">
            <el-select
              v-model="screenData.problem_type_id"
              placeholder="请选择问题类型"
              size="small"
              clearable
              @change="typeChange"
            >
              <el-option
                v-for="dict in typeOptions"
                :key="dict.id"
                :label="dict.dict_val"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="项目">
            <el-select
              v-model="screenData.project_id"
              placeholder="请选择项目"
              size="small"
              clearable
              @change="projectChange"
            >
              <el-option
                v-for="dict in projectOptions"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="负责人">
            <el-select
              v-model="screenData.functionary_id"
              placeholder="请选择负责人"
              size="small"
              clearable
              @change="functionaryChange"
            >
              <el-option
                v-for="dict in functionaryOptions"
                :key="dict.id"
                :label="dict.user_name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="创建人">
            <el-select
              v-model="screenData.creator_id"
              placeholder="请选择创建人"
              size="small"
              clearable
              @change="createrChange"
            >
              <el-option
                v-for="dict in createrOptions"
                :key="dict.id"
                :label="dict.user_name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>


          <el-form-item label="问题名称">
            <el-input v-model="screenData.problem_name" placeholder="请输入名称" clearable></el-input>
          </el-form-item>

          <el-form-item>

            <el-button type="primary" size="small" @click="handleQuery">搜索
            </el-button>
            <el-button plain size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        @row-click="tableRowClick"
        size="medium"
        :data="tableData"
        border
        align="center"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="problem_no"
          label="问题编号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="project_name"
          label="项目名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="task_name"
          label="任务名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="priority"
          label="优先级">
        </el-table-column>
        <el-table-column
          align="center"
          prop="problem_name"
          label="问题名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="problem_type"
          label="问题类型">
        </el-table-column>
        <el-table-column
          align="center"
          prop="creator_name"
          label="创建人">
        </el-table-column>
        <el-table-column
          align="center"
          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.created_at ? dateFormat1('yyyy-mm-dd',scope.row.created_at) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="functionary"
          label="负责人">
        </el-table-column>
        <el-table-column
          align="center"
          label="期望完成时间">
          <template slot-scope="scope">
            {{scope.row.expect_end_time ? dateFormat1('yyyy-mm-dd',scope.row.expect_end_time) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="reality_end_time"
          min-width="100px"
          label="实际完成时间">
        </el-table-column>
        <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.problem_status == 1">待处理</span>
            <span v-else-if="scope.row.problem_status == 2">处理中</span>
            <span v-else-if="scope.row.problem_status == 3">待确认</span>
            <span v-else-if="scope.row.problem_status == 4">已解决</span>
            <span v-else-if="scope.row.problem_status == 5">请求再次处理</span>
            <span v-else-if="scope.row.problem_status == 6">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          header-align="center"
          prop="name"
          label="操作"
        >
          <template slot-scope="scope">

            <div style="display:flex;width: 100%;flex-wrap: wrap">

              <el-button size="medium" type="text" v-if="scope.row.problem_status == 1 && checkCreator(scope.row.functionary_id) && scope.row.problem_status != 6" @click="startProblem(scope.row.id)">
                开始处理
              </el-button>
              <el-button class="text-btn-red" size="medium" type="text" v-if="scope.row.problem_status == 1 && checkCreator(scope.row.creator_id) && scope.row.problem_status != 6" @click="deleteClick(scope.row.id)">
                关闭问题
              </el-button>
              <el-button size="medium" type="text" v-if="(scope.row.problem_status == 2 || scope.row.problem_status == 5) && checkCreator(scope.row.functionary_id) && scope.row.problem_status != 6" @click="reportClick(scope.row.id)">
                问题反馈
              </el-button>
              <el-button size="medium" type="text" v-if="scope.row.problem_status == 3 && checkCreator(scope.row.creator_id) && scope.row.problem_status != 6" @click="acceptClick(scope.row.id)">
                问题确认
              </el-button>
            </div>


          </template>

        </el-table-column>
      </el-table>

      <pagination style="display:flex;justify-content:flex-end;" :total="total" :page.sync="screenData.pager.skip"
                  :limit.sync="screenData.pager.limit" @pagination="getListData" />

    </div>

    <el-dialog
      v-if="dialogVisible"
      title="创建问题"
      :visible.sync="dialogVisible"
      width="750px"
      :before-close="handleClose">

      <add-problem-view ref="addView"/>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">提交问题</el-button>
        </span>
    </el-dialog>

    <el-dialog
      width="700px"
      title="问题反馈"
      v-if="reportVisible"
      :visible.sync="reportVisible"
      append-to-body>

      <el-form :model="reportData" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >

        <el-form-item label="问题反馈描述">
          <el-input
            v-model="reportData.result_describe"
            placeholder="请输入问题反馈描述"
            type="textarea"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="reportData.remark"
            placeholder="请输入备注"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>

        <el-form-item label="附件">
          <upload ref="upload" :edit-list="reportData.accessory" @uploadSuccess="uploadSuccess" @deleteSuccess="deleteSuccess" />

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reportVisible = false">取 消</el-button>
        <el-button type="primary" @click="reportConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      width="500px"
      title="问题确认"
      :visible.sync="acceptVisible"
      append-to-body>

      <el-form :model="acceptData" class="demo-form-inline" label-width="100px" size="medium" label-position="left" >

        <el-form-item label="问题反馈描述">
          <div>{{problemDetail.result_describe}}</div>
        </el-form-item>

        <el-form-item label="问题反馈备注">
          <div>{{problemDetail.remark}}</div>
        </el-form-item>

        <el-form-item label="附件">
          <file-preview :file-list="problemDetail.accessory" />
        </el-form-item>

        <el-form-item label="问题确认">
          <el-select v-model="acceptData.problem_result" placeholder="请选择确认结果">
            <el-option
              v-for="item in acceptResult"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="确认意见">
          <el-input
            v-model="acceptData.acceptance_opinion"
            placeholder="请输入确认意见"
            type="textarea"
            :rows="4">
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="acceptData.remark_result"
            placeholder="请输入备注"
            type="textarea"
            :rows="2">
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="acceptVisible = false">取 消</el-button>
        <el-button type="primary" @click="acceptConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import addProblemView from "../modules/addProblemView";

    export default {
        name: "index",
        components:{ addProblemView },
        data:function () {
            return{
                acceptVisible:false,
                reportVisible:false,
                dialogVisible:false,
                total:0,
                tableData:[],
                screenData:{
                    wait_do:0,
                    status:'',
                    problem_status:0,
                    problem_type:0,
                    problem_type_id:'',
                    project_id:'',
                    problem_name:'',
                    creator_id:'',
                    functionary_id:'',
                    pager:{
                        limit:10,
                        skip:1,
                        OrderBy:'',
                        OrderMethod:-1
                    },
                },
                statusOptions:[
                    {label:'待处理',value:1},
                    {label:'处理中',value:2},
                    {label:'待确认',value:3},
                    {label:'已解决',value:4},
                    {label:'请求再次处理',value:5},
                    {label:'已关闭',value:6},
                ],
                typeOptions:[],
                projectOptions:[],
                createrOptions:[],
                functionaryOptions:[],

                problemId:'',
                reportData:{},

                problemDetail:{},
                acceptData:{},
                acceptResult:[
                    {
                        value:1,
                        label:'已解决关闭问题'
                    },
                    {
                        value:2,
                        label:'未解决继续问题'
                    }
                ],
            }
        },
        created(){
            if (this.$route.query.research){
                this.screenData.wait_do = 1;
            }
            this.typeOptions = this.$store.getters.sysDic('problem_type')
            this.getListData();
            this.getUserList();
            this.getProjectList();
        },
        methods:{
            checkCreator:function(id){
                if (this.$store.getters.userInfo.user.id == id){
                    return true
                }
                return false
            },
            getProjectList:function(){
                this.$api.PROJECT_START_PROBLEM_PROJECT_LIST().then(res=>{
                    if (res.code == 200){

                        res.data.forEach(item=>{
                            let phases = item.project_phases_name
                            item.name = item.project_name + '(' + phases + ')'
                        })
                        this.projectOptions = res.data
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            getUserList:function(){
                this.$api.PROJECT_START_PROBLEM_USER_LIST(1).then(res=>{
                    if (res.code == 200){
                        this.functionaryOptions = res.data
                    }else{
                        this.$message.error(res.msg)
                    }
                })

                this.$api.PROJECT_START_PROBLEM_USER_LIST(2).then(res=>{
                    if (res.code == 200){
                        this.createrOptions = res.data
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            getListData:function(){

                this.$api.PROJECT_WORK_PROBLEM_LIST(this.screenData).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                        this.total = res.data.total
                    }
                }).catch(err=>{

                })
            },
            tableRowClick:function(row, column, event){
                if (column.label != '操作'){

                    this.$router.push({name:"problem-detail",query:{id:row.id}})
                }
            },
            reportClick:function (id) {
                this.problemId = id;
                this.reportData = {
                    result_describe:'',
                    remark:'',
                    accessory:[],
                }

                this.reportVisible = true;
            },
            deleteSuccess() {
                this.reportData.accessory = this.$refs.upload.emitFileList()
            },
            uploadSuccess() {
                this.reportData.accessory = this.$refs.upload.emitFileList()
            },
            reportConfirm:function () {

                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.problemId,3,this.reportData).then(res=>{
                    this.reportVisible = false;
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.reportVisible = false;
                })

            },
            acceptClick:function(id){
                this.problemId = id;
                this.$api.PROJECT_WORK_PROBLEM_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.problemDetail = res.data;

                        this.acceptData = {
                            problem_result:1,
                            acceptance_opinion:'',
                            remark_result:'',
                        }

                        this.acceptVisible = true;
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })

            },
            acceptConfirm:function () {
                let status = 4;
                if (this.acceptData.problem_result == 2){
                    status = 5
                }
                this.$api.PROJECT_WORK_PROBLEM_UPDATE(this.problemId,status,this.acceptData).then(res=>{
                    this.acceptVisible = false;
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.reportVisible = false;
                })
            },
            startProblem:function (id) {
                this.$api.PROJECT_WORK_PROBLEM_UPDATE(id,2,{}).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            deleteClick:function (id) {
                this.$api.PROJECT_WORK_PROBLEM_DELETE(id).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            addClick:function(){
                this.dialogVisible = true;
            },
            confirmClick:function(){
                if (this.$refs.addView){
                    this.$refs.addView.formValidate().then(val=>{
                        if (val){
                            this.$refs.addView.data.expect_end_time = this.dealDateStr(new Date(this.$refs.addView.data.expect_end_time)) + " 00:00:00"
                            this.$api.PROJECT_WORK_PROBLEM_CREATE(this.$refs.addView.data).then(res=>{
                                if (res.code == 200){
                                    this.$message.success("添加成功")
                                    this.getListData();
                                }else{
                                    this.$message.error(res.msg)
                                }
                            }).catch(err=>{

                            })
                            this.dialogVisible = false;
                        }
                    })
                }
            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
            handleClose:function(){
                this.dialogVisible = false
            },
            handleQuery:function () {
                this.screenData.wait_do = 0;
                this.screenData.pager.skip = 1;
                this.getListData()
            },
            resetQuery:function () {
                this.screenData.wait_do = 0;
                this.screenData.pager.skip = 1;
                this.screenData.status = '';
                this.screenData.problem_status = 0;
                this.screenData.problem_type = 0;
                this.screenData.project_id = '';
                this.screenData.problem_name = '';
                this.screenData.creator_id = '';
                this.screenData.functionary_id = '';
                this.screenData.problem_type_id = '';

                this.getListData()
            },
            statusChange:function (id) {
                this.screenData.wait_do = 0;
                if(!id){
                    this.screenData.problem_status = 0
                }else{
                    this.screenData.problem_status = this.screenData.status
                }
                this.screenData.pager.skip = 1;
                this.getListData()
            },
            typeChange:function (id) {
                this.screenData.wait_do = 0;
                if(!id){
                    this.screenData.problem_type = 0
                }
                this.screenData.pager.skip = 1;
                this.getListData()
            },
            projectChange:function (id) {
                this.screenData.wait_do = 0;
                this.screenData.pager.skip = 1;
                this.getListData()
            },
            createrChange:function () {
                this.screenData.wait_do = 0;
                this.screenData.pager.skip = 1;
                this.getListData()
            },
            functionaryChange:function () {
                this.screenData.wait_do = 0;
                this.screenData.pager.skip = 1;
                this.getListData()
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/views/projectManagement/problem/list.scss";
</style>
